<template>
  <div class="pc-list-demo">
    <pc-list :item-height="30" :items="data" type="table">
      <template #before>
        <thead>
        <tr>
          <th v-for="val in header" :key="val">{{ val }}</th>
        </tr>
        </thead>
      </template>
      <template #default="{item}">
        <tr>
          <td v-for="val in header" :key="val">
            {{ item }}
          </td>
        </tr>
      </template>
    </pc-list>
  </div>
</template>

<script lang="ts" setup>
const data: string[] = []
const header: string[] = []

for (let i = 0; i < 6; i++) {
  header.push(`表头${i + 1}`);
}
for (let i = 0; i < 10000; i++) {
  data.push(`text${i + 1}`);
}

</script>

<style scoped>
.pc-list-demo {
  width: 100%;
  height: 300px;

  td {
    height: 30px;
  }
}
</style>